<template>
  <div
    class="login"
    :class="cutLoginTheme"
  >
    <el-switch
      class="el_switch_style"
      v-model="value"
      active-color="#ffcc70"
      active-icon-class="el-icon-sunny"
      inactive-icon-class="el-icon-moon"
      inactive-color="#2b86c5"
    >
    </el-switch>
    <div class="boxForm_r">
      <div class="boxStyle">
        <loginInput />
      </div>
    </div>
  </div>
</template>

<script>
import loginInput from "./loginInput";
export default {
  name: "Login",
  components: {
    loginInput,
  },
  computed: {
    cutLoginTheme() {
      return this.value ? "login_dark" : "login_light";
    },
  },
  data() {
    return {
      value: true,
    };
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
html,
body {
  width: 100%;
  height: 100%;
}
.login_dark {
  background-color: #4158d0;
  background-image: linear-gradient(
    43deg,
    #4158d0 0%,
    #c850c0 46%,
    #ffcc70 100%
  );
}
.login_light {
  background-color: #ff3cac;
  background-image: linear-gradient(
    225deg,
    #ff3cac 0%,
    #784ba0 50%,
    #2b86c5 100%
  );
}
.login {
  min-width: 1100px;
  min-height: 610px;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
}
.boxForm_r {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.boxStyle {
  background-color: #fff;
  padding: 0 30px;
  width: 500px;
  display: flex;
  border-radius: 10px;
}
.el_switch_style {
  position: absolute;
  top: 20px;
  right: 20px;
}
</style>
